<%@ page import="com.zwy.ubts.service.BookTypeService" %>
<%@ page import="com.zwy.ubts.service.impl.BookTypeServiceImpl" %>
<%@ page import="com.zwy.ubts.bean.BookType" %>
<%@ page import="java.util.List" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--
  Created by IntelliJ IDEA.
  User: Zhou Wenying
  Date: 2023/3/10
  Time: 21:11
--%>
<!--header-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="pragma" content="no-cache">
</head>

<link type="text/css" rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="/static/css/style.css">
<link type="text/css" rel="stylesheet" href="/static/layui/css/layui.css">

<%--通过管理员访问书籍信息不显示头部信息--%>
<c:if test="${noShow != 1}">
<div class="header">
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <h1 class="navbar-brand"><a href="/">旧书交易平台</a></h1>
            </div>
            <!--navbar-header-->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="/" >首页</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle " data-toggle="dropdown">商品分类<b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-2">
                            <li>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <h4>商品分类</h4>
                                        <ul class="multi-column-dropdown">

                                            <li><a class="list" href="/booktypes_list">全部系列</a></li>
                                            <%--下拉框实现--%>

                                            <%
                                                BookTypeService bookTypeService = new BookTypeServiceImpl();
                                                List<BookType> bookType = bookTypeService.queryBookTypes();
                                                request.setAttribute("bookTypeAll",bookType);
                                            %>

                                            <c:forEach items="${bookTypeAll}" var="t"><%--分类点击事件--%>
                                                <li><a class="list" href="/booktypes_list?bookClassify=${t.btId}">${t.btName }</a></li>
                                            </c:forEach>

                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <%--<li><a href="recommend_books.action?rtype=2&amp;pageNumber=1">热销</a></li>
                    <li><a href="recommend_books.action?rtype=3&amp;pageNumber=1">新品</a></li>--%>
                    <li><a href="/addBook">去售卖</a></li>
                    <c:if test="${sessionScope.user != null}">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle " data-toggle="dropdown">${sessionScope.user.userNickname}<b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-2">
                            <li>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <h4>${sessionScope.user.userNickname}</h4>
                                        <ul class="multi-column-dropdown">
                                            <li><a class="list" href="/user">个人中心</a></li>
                                            <li><a class="list" href="/myOrderSell">我的售卖</a></li>
                                            <li><a class="list" href="/myOrderBuy">我的购买</a></li>
                                            <li><a class="list" href="/Recharge">去充值</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                        <li><a  href="/loginOut">退出</a></li>
                    </c:if>

                    <c:if test="${sessionScope.user == null}">
                        <li ><a  href="/register"> 注册</a></li>
                        <li ><a  href="/login"> 登录</a></li>
                    </c:if>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle " data-toggle="dropdown">客户服务<b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-2">
                            <li>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <h4>客户服务中心</h4>
                                        <ul class="multi-column-dropdown">
                                            <li><a class="list" href="#">联系我们</a></li>
                                            <li><a class="list" href="#">购物指南</a></li>
                                            <li><a class="list" href="#">帮助中心</a></li>
                                            <li><a class="list" href="#">关于我们</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>


                </ul>
                <!--/.navbar-collapse-->
            </div>
            <!--//navbar-header-->
        </nav>
        <div class="header-info">
            <div class="header-right search-box">
                <a href="javascript:;"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>
                <div class="search">
                    <form class="navbar-form" style="padding: 30px" action="/booktypes_list">
                        <c:if test="${bookClassify != null}">
                            <input type="hidden" name="bookClassify" value="${bookClassify}">
                        </c:if>
                        <input type="text" class="form-control" name="like">
                        <button type="submit" class="btn btn-default" aria-label="Left Align">搜索</button>
                    </form>
                </div>
            </div>

            <div class="header-right cart">
                <a id="toBookCart">
                    <span class="glyphicon glyphicon-shopping-cart " aria-hidden="true"><span id="carNum" class="card_num">0</span></span>
                </a>
            </div >

            <div class="clearfix">

            </div>
        </div>
    </div>
<%--
    <div class="page1"><img src="/staticimage/img03.png" width="1380" height="20" alt="" /></div>
--%>
</div>
</c:if>
<script type="text/javascript" src="/static/js/jquery-3.6.1.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/layui/layui.js"></script>
<script type="text/javascript" src="/static/layer/layer.js"></script>



<%--//购物车实现：将书籍id保存在cookie--%>
<script>

    /*用于设置和获取浏览器中的 cookie。*/
    function setCookie(cname,cvalue,exdays)/*cookie 名称（cname）、cookie 值（cvalue）和过期时间（exdays）*/
    {
        var d = new Date();
        d.setTime(d.getTime()+(exdays*24*60*60*1000));
        var expires = "expires="+d.toGMTString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }

    function getCookie(cname)
    {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        /*判断变量 c 是否以变量 name 开头，
        如果是，则返回从 name.length 开始到 c.length 结束的子字符串（即 cookie 的值）。
        如果循环结束后仍未找到对应的 cookie，则返回空字符串。*/
        for(var i=0; i<ca.length; i++)
        {
            var c = ca[i].trim();
            if (c.indexOf(name)==0) return c.substring(name.length,c.length);
        }
        return "";
    }

    //[{id ,name},{}] //存储书籍id和name
    var bookList = new Array();
    //arr.splice(index,1)//删除指定位置元素
    console.log("head")
    var bookJson = getCookie("bookList")
    if (bookJson != ""){
        console.log("bookJson");
        console.log(bookJson);
        bookList = JSON.parse(bookJson);//将json转为booklist
        console.log("head");
        console.log(bookList);

        var num = bookList.length;
        console.log("num"+num);
        $("#carNum").text(num); //购物车数量

    }

    function bookListAdd(book) {
        bookList.push(book);
        var json = JSON.stringify(bookList);//将booklist转为json字符串
        setCookie("bookList",json,30);
        upCar();//更新购物车数量
    }
    function bookListDelete(id) {

        for (var i = 0;i<bookList.length;i++){
            if (bookList[i].id == id){
                bookList.splice(i,1)//删除指定位置元素一个元素
                break;
            }
        }
        var json = JSON.stringify(bookList);
        setCookie("bookList",json,30);
        upCar();
    }

    function delCart(id) {
        bookListDelete(id);
        layer.msg('删除成功',{
            icon:1,
            time:2000
        });
        //$("#toBookCart").trigger("click");
        toBookCartClick();
    }
    function addCart(bookName,bookId) {
        var book = {};
        book.id = bookId;
        book.name = bookName;
        if(bookList.length!=0)
        for (var i = 0;i<bookList.length;i++){
            if (bookList[i].id == bookId){
                layer.msg(bookName+'不能重复添加',{
                    icon:2,
                    time:2000
                });
                return;
            }
        }
        layer.msg(bookName+'添加成功',{
            icon:1,
            time:2000
        });
        bookListAdd(book);

    }

    function upCar() {
        $("#carNum").text(bookList.length);
    }

    $("#toBookCart").click(toBookCartClick);

    //去购物车页面
    function toBookCartClick() {
        //没数据不去购物车详情页面 return；
        //if (bookList.length == 0) return;
        //要不然又要做提示的弹出框，可以去显示空就行
        var url = "/bookCart?";//bookCart?bookIds=1&bookIds=2&bookIds=xxx&
        for (var i = 0;i<bookList.length;i++){
            url+="bookIds="+bookList[i].id+"&";//get多个数据用&分割
        }
        console.log(url);
        window.location.href=url;

    }
</script>